<template>
  <div>
    <el-card>
      <el-form :model="form" label-position="right" ref="formRef" :rules="formRules">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="编号">
              <el-input v-model="form.number" placeholder="不输入则自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="产品中文名称" required>
              <el-input v-model="form.name" @change="hanleName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="产品英文名" required>
              <el-input v-model="form.englishName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="产品类别">
              <el-tree-select v-model="form.mtlKindId" :data="parentData" :render-after-expand="false"
                :check-strictly="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="中文单位" required>
              <el-select v-model="form.unitId" clearable placeholder="请选择：">
                <el-option v-for="item in configData.unitList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="英文单位" required>
              <el-select v-model="form.subUnitId" clearable placeholder="请选择：">
                <el-option v-for="item in configData.unitList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="订舱英文名" required>
              <el-input v-model="form.bookingSpaceEnName"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="所属客户">
              <ts-select v-model="form.custId" file-name="CustReport" :template="custTemplate" :input-width="300" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="报关中文名" required>
              <el-input v-model="form.customsDeclarationName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="报关英文名" required>
              <el-input v-model="form.customsDeclarationEnName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="包装规格" required>
              <el-input v-model="form.spec" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="包装要求" required>
              <el-input v-model="form.packing"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="长" required>
              <el-input-number v-model="form.length" :precision="3" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="宽" required>
              <el-input-number v-model="form.width" :precision="3" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="高" required>
              <el-input-number v-model="form.high" :precision="3" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="体积">
              <el-input v-model="volume" disabled/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="净重" required>
              <el-input-number v-model="form.netWeight" :precision="2" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="毛重" required>
              <el-input-number v-model="form.grossWeight" :precision="2" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="退税率" required>
              <el-input style="width: 50%" v-model="form.refundedTax" type="number">
                <template #append>%</template>
              </el-input>

            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="HS Code" required>
              <el-input v-model="form.hscode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="危险品类别" required>
              <el-input v-model="form.dangerousKind"></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="结算成本价" required>
              <el-input-number v-model="form.price" :precision="2" />
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="最小单位容量" required>
              <el-input-number v-model="form.minUnitCapacity"  />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="最小单位数量" required>
              <el-input-number v-model="form.minUnitQty" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="状态" prop="status">
              <el-switch v-model="form.status" size="large" inline-prompt :active-icon="Check" :inactive-icon="Close"
                active-value="normal" inactive-value="disable" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="质量指标" required>
              <div style="display: flex;flex-direction: column;">
                <ts-select v-model="form.qualityIndexId" file-name="QualityIndexReport" :template="custTemplate"
                  :input-width="280" @updateRow="qualityIndexUpdate" :label="form.qualityIndexName"/>
                <el-input style="margin-top: 10px;" v-model="form.qualityIndexRemark" type="textarea"></el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <el-form-item label="包装质量要求" required>
              <div style="display: flex;flex-direction: column;">
              <ts-select v-model="form.packingRequestId" file-name="PackingRequestReport" :template="custTemplate"
              :input-width="280" @updateRow="handlePackingRequest" :label="form.packingRequestName"/>
              <el-input style="margin-top: 10px;" v-model="form.packingDetail" type="textarea"></el-input>
            </div>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div class="button-position">
        <el-button @click="updateVisible">取 消</el-button>
        <el-button type="primary" @click="addOrder(formRef)">确 定</el-button>
      </div>
    </el-card>


  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import { ElMessage, ElNotification } from "element-plus";
import Api from "@/api/model/pm";
import sysApi from "@/api/model/system";
import tsSelect from "@/components/scSelect/index.vue";
import tsFormCard from "@/components/tsFormCard/index.vue";
import { deepClone } from "@/utils/arr";
import tool from "@/utils/tool";
const emit = defineEmits(["updatetable"]);
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});

const custTemplate = {
  label: "name",
  value: "id",
};
// 添加用户数据的对象
const form = ref({});
const configData = ref([]);
const formRef = ref();
const formRules = reactive({});
const parentData = ref([]);
const volume = computed(()=>{
  return tool.formatRoundNum(form.value.high*form.value.width*form.value.length,3)
})
onMounted(() => {
  getInit();
  getParent()
});
const getInit = async () => {
  let res = await Api.product.add.post();
  if (res.code == "200") {
    configData.value = res.configData;
    form.value = res.data;
  }
};
const getParent = async () => {
  let params = {
    fileName: "ProductCategoryTreeReport"
  }
  let res = await Api.category.productCategoryTree.post(params);
  parentData.value = res.reportData
}
const hanleName = async(val) =>{
  if(val){
    let params = {
    fileName: 'QualityIndexReport',
    fieldMap:{name:val},
    fuzzyQuery: '0'
  }
  var res = await sysApi.select.query.post(params)
  if(res.code === '200'){
    if(res.reportData.length===0){
      ElMessage.warning({message:'不存在对应的质量指标'})
    }
    else{
      console.log(res.reportData[0])
      form.value.qualityIndexId = res.reportData[0].id
      form.value.qualityIndexName = res.reportData[0].name
      form.value.qualityIndexRemark = res.reportData[0].remark
    }
    
  }
  }
  
}
const qualityIndexUpdate = (val) => {
  form.value.qualityIndexRemark = val.remark
}
const handlePackingRequest = (val) =>{
  form.value.packingDetail = val.remark
}
const updateVisible = (val) => {
  emit("updatetable");
};
const addOrder = async (formRef) => {
  await formRef.validate((valid, fields) => {
    if (valid) {
      addOrderData();
    }
  });
};

const addOrderData = async () => {
  // console.log(form.name)
  var params = {
    bean: form.value,
  };
  console.log(params);
  var res = await Api.product.save.post(params);
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "添加成功！",
      duration: 2000,
    });
    emit("updatetable", true);
  }
};
</script>
<style lang="less" scoped>
:deep(.el-card__header) {
  padding: 10px !important;
  line-height: 22px;
  font-size: 16px;
  height: 45px;
  background: #f6f6f6;
}

.float-right {
  float: right;
}
</style>